<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>test</title>
</head>

<body>
    <script>
        var data = {
            name: 'tom',
            age: 20
        }
        // let vm = {}
        // // vue2中实现响应式：Object.defineproperty,会进行深层的数据劫持
        // Object.keys(data).forEach(key => {
        //     proxy(key)
        // })
        // function proxy(key) {
        //     Object.defineProperty(vm, key, {
        //         get() {
        //             // vue内部，会在这里收集依赖
        //             // 获取数据
        //             console.log('get执行了')
        //             return data[key]
        //         },
        //         set(newVal) {
        //             // vue内部，会在这里触发来（触发模板更新）
        //             // 修改数据
        //             console.log('set执行了')
        //             data[key] = newVal
        //         }
        //     })
        // }
        // console.log(vm.name)
        // vm.age = 30
        // // console.log(data)
        // // vue2中后期添加的数据不是响应式的
        // data.sex = '男';
        // console.log(vm.sex)

        // vue3中实现响应式：Proxy
        let vm = new Proxy(data, {
            get(target, key) {
                // vue3内部，会在这里收集依赖
                console.log('get方法执行')
                return Reflect.get(target, key)
            },
            set(target, key, value) {
                // vue3内部，会在这里触发依赖
                console.log('set方法执行')
                return Reflect.set(target, key, value)
            }
        })
        console.log(vm.name)
        vm.age = 30
        // vue3后期添加的数据还是响应式的
        data.sex = '男'
        console.log(vm.sex)
    </script>
</body>

</html>